<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹球大战 - Canvas游戏</title>
    <link rel="stylesheet" href="assets/styles/main.css">
</head>

<body>
    <div class="game-container">
        <header class="game-header">
            <h1>🎮 弹球大战</h1>
            <div class="game-info">
                <div class="score-board">
                    <div class="player-score">
                        <span class="player-name">玩家1</span>
                        <span class="score" id="player1-score">0</span>
                    </div>
                    <div class="player-score">
                        <span class="player-name">玩家2</span>
                        <span class="score" id="player2-score">0</span>
                    </div>
                </div>
                <div class="game-controls">
                    <button id="start-btn" class="btn btn-primary">开始游戏</button>
                    <button id="pause-btn" class="btn btn-secondary">暂停</button>
                    <button id="reset-btn" class="btn btn-danger">重置</button>
                </div>
            </div>
        </header>

        <main class="game-main">
            <canvas id="gameCanvas" width="800" height="600"></canvas>

            <div class="game-overlay" id="game-overlay">
                <div class="overlay-content">
                    <h2 id="overlay-title">欢迎来到弹球大战！</h2>
                    <p id="overlay-message">点击"开始游戏"开始对战</p>
                    <div class="controls-info">
                        <h3>游戏控制：</h3>
                        <div class="control-group">
                            <div class="player-controls">
                                <h4>玩家1 (左侧)</h4>
                                <p>W/S - 上下移动</p>
                            </div>
                            <div class="player-controls">
                                <h4>玩家2 (右侧)</h4>
                                <p>↑/↓ - 上下移动</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <footer class="game-footer">
            <div class="game-stats">
                <span class="stat">球速: <span id="ball-speed">5</span></span>
                <span class="stat">回合: <span id="round-count">1</span></span>
                <span class="stat">时间: <span id="game-time">00:00</span></span>
            </div>
        </footer>
    </div>

    <script type="module" src="src/js/main.js"></script>
    <script>
        // 错误处理
        window.addEventListener('error', function (e) {
            console.error('游戏加载错误:', e.error);
            alert('游戏加载出现问题，请刷新页面重试。错误信息: ' + e.error.message);
        });

        // 模块加载错误处理
        window.addEventListener('unhandledrejection', function (e) {
            console.error('模块加载错误:', e.reason);
            alert('模块加载失败，请检查浏览器是否支持ES6模块。错误信息: ' + e.reason);
        });
    </script>
</body>

</html>